<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    @@include('./include/header.html')
    <title> 我要订货 </title>
    <link href="../assets/js/Swiper-4.0.7/swiper.min.css" rel="stylesheet">
    <style>
        .weui-tab__bd .weui-cells:first-child{margin-top:0;}
        .weui-btn_primary:not(.weui-btn_disabled):active{opacity: 1}
         /* 4/26 */
         /* cat_icon */
        .cat_icon{
            position:fixed;
            left:15px;
            bottom:80px;
            z-index: 111;
        }
        .cat_icon img{width:40px;height:40px;display:block;}
        /* cat_icon */
    </style>
</head>
<body>
<div class="page">
    <div class="page-hd">
        @@include('./include/page-hd.html', {
        "title": "我要订货",
        "menu": ""
        })
    </div>

    <div class="page-bd" style="background:#f0f5f1;">
        <!-- 页面内容-->
        <!-- 4/26 -->
        <!-- cat_icon -->
        <div class="cat_icon">
            <img src="../assets/images/cat_icon.png" alt="" />
            <span class="weui-badge" style="position: absolute;top: 0;right: -6px;">888</span>
        </div>
        <!-- cat_icon -->
        <div class="weui-tab">
            <!-- 4/26 -->
            <div class="tab_search">
                <div class="weui-flex search-flex">
                    <div class="weui-flex__search">
                        <img src="../assets/images/icon_search.png" alt="" />
                    </div>
                    <div class="weui-flex__item">
                        <input class="weui-input" type="text" placeholder="请输入商品名称搜索" />
                    </div>
                </div>
                <div class="swiper_more">
                    <img src="../assets/images/icon_menu02.png" class="icon_menu" />
                    <span class="weui-badge" style="position: absolute;top: 2px;right:4px;background:#4fe295">8</span>
                </div>
            </div>
            <!-- 4/26 -->
            <div class="weui-tab__bd nb_tab-bd">
                <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                    <!-- 4/26 -->
                    <div class="rult_show" style="display:none">
                        <span class="rult_icon">Nike耐克<div class="del_btn"></div></span>
                        <span class="rult_icon rult_child">Nike板鞋<div class="del_btn"></div></span>
                        <span class="rult_icon rult_child">Nike足球鞋<div class="del_btn"></div></span>
                    </div>
                    <!-- 4/26 -->
                    <div class="weui-grids small-grids border-none">
                        <div class="small-grid">
                            <div class="pro-grid">
                                <div class="pro-grid_title">NIKE耐克新款耐克新款耐克新款</div>
                                <a href="商品详情.html" class="pro-grid_link"><img src="../assets/images/rwm.png" alt="" /></a>
                                <div class="weui-flex">
                                    <div class="weui-flex__item">￥<span>869</span></div>
                                    <div class="weui-flex__ft">总代:88</div>
                                </div>
                                <div class="small_position">
                                    <div class="count small_plus">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                    <div class="count small_count" style="display:none;" >
                                        <a class="count_btn count_minus "></a>
                                        <input class="count_number" type="number" value="1">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="small-grid">
                            <div class="pro-grid">
                                <div class="pro-grid_title">NIKE耐克新款</div>
                                <a href="#" class="pro-grid_link">
                                    <img src="../assets/images/proimg1x1.png" alt="" />
                                </a>
                                <div class="weui-flex">
                                    <div class="weui-flex__item">￥
                                        <span>869</span>
                                    </div>
                                    <div class="weui-flex__ft">总代:88</div>
                                </div>
                                <div class="small_position">
                                    <div class="count small_plus">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                    <div class="count small_count" style="display:none;">
                                        <a class="count_btn count_minus "></a>
                                        <input class="count_number" type="number" value="1">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="small-grid">
                            <div class="pro-grid">
                                <div class="pro-grid_title">NIKE耐克新款</div>
                                <a href="#" class="pro-grid_link">
                                    <img src="../assets/images/proimg1x1.png" alt="" />
                                </a>
                                <div class="weui-flex">
                                    <div class="weui-flex__item">￥
                                        <span>869</span>
                                    </div>
                                    <div class="weui-flex__ft">总代:88</div>
                                </div>
                                <div class="small_position">
                                    <div class="count small_plus">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                    <div class="count small_count" style="display:none;">
                                        <a class="count_btn count_minus "></a>
                                        <input class="count_number" type="number" value="1">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="small-grid">
                            <div class="pro-grid">
                                <div class="pro-grid_title">NIKE耐克新款</div>
                                <a href="#" class="pro-grid_link">
                                    <img src="../assets/images/proimg1x1.png" alt="" />
                                </a>
                                <div class="weui-flex">
                                    <div class="weui-flex__item">￥
                                        <span>869</span>
                                    </div>
                                    <div class="weui-flex__ft">总代:88</div>
                                </div>
                                <div class="small_position">
                                    <div class="count small_plus">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                    <div class="count small_count" style="display:none;">
                                        <a class="count_btn count_minus "></a>
                                        <input class="count_number" type="number" value="1">
                                        <a class="count_btn count_plus"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

    </div>
     @@include('./include/bottom-bar.html',{ "item1": "active", "item2": "", "item3": "", "item4": "" })
</div>

<!-- 规格 -->
<div id="popup_cat" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="weui-cells buy-cells" style="padding-bottom:28px">
            <div class="weui-cell" style="padding-top:36px;">
                <div class="weui-cell__hd" style="position:relative">
                    <div class="weui-top_icon1"></div>
                    <div class="weui-top_icon2"></div>
                    <img src="../assets/images/proimg1x1.png" class="hdpro_img" alt="" />
                </div>
                <div class="weui-cell__bd">
                    <div class="pro_title">
                        阿迪达斯男女 跑步鞋透气减震跑步鞋2018潮人必备新品跑步鞋透气减震跑步鞋2018潮人必备新品
                    </div>
                    <div class="weui-flex flex-center mt20">
                        <div class="weui-flex__item">
                            <span class="price">
                                <span class="text-red">￥</span>
                                <b>639.00</b>元</span>
                        </div>
                        <div class="text-muted fs20">总代：88</div>
                    </div>
                </div>
                <div class="close-popup" style="position:absolute;top:10px;right:20px;">
                    <img src="../assets/images/icon_close.png" class="close_icon" alt="" />
                </div>
            </div>
            <div class="max-height">
                <div class="weui-cell ptb0">
                    <div class="weui-cell__bd">
                        <div class="label_group">
                            <h3 class="label_tit">请选择颜色：</h3>
                            <div class="labels">
                                <label>
                                    <input name="color" checked type="radio">
                                    <span>粉紫</span>
                                </label>
                                <label>
                                    <input name="color" type="radio">
                                    <span>深蓝</span>
                                </label>
                                <label>
                                    <input name="color" type="radio">
                                    <span>靛蓝</span>
                                </label>
                            </div>
                        </div>
                        <div class="label_group">
                            <h3 class="label_tit">请选择尺码：</h3>
                            <div class="labels">
                                <label>
                                    <input name="size" checked type="radio">
                                    <span>36</span>
                                </label>
                                <label>
                                    <input name="size" type="radio">
                                    <span>37</span>
                                </label>
                                <label>
                                    <input name="size" type="radio">
                                    <span>37</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="weui-cell" style="margin-top:-48px;z-index:111;position:relative;">
            <div class="weui-cell__bd">
                <a class="weui-btn weui-btn_primary mt20" id="js_check" href="###">确定</a>
            </div>
        </div>
    </div>
</div>

<!-- 类型选择 -->
<div id="popup_screen" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="weui-cells">
            <div class="weui-cell pd20">
                <div class="weui-cell__bd tc">
                    <span class="screen_title">筛选</span>
                    <div class="m_text">658个品牌符合条件</div>
                </div>
                <div class="weui-cell__ft close-popup"><img src="../assets/images/icon_close.png" class="close_icon" alt="" /></div>
            </div>
        </div>
        <div class="screen-box">
            <div class="screen-left">
                <div class="sl_title">鸿星尔克</div>
                <div class="sl_title">席梦思</div>
                <div class="sl_title checked">Nike耐克</div>
                <div class="sl_title">膳魔师</div>
                <div class="sl_title">华歌尔</div>
                <div class="sl_title">泰格豪雅</div>
            </div>
            <div class="screen-right">
                <div class="weui-cells weui-cells_checkbox border-none">
                    <label class="weui-cell weui-check__label" for="s11">
                        
                        <div class="weui-cell__bd">
                            <p class="sr_title">Nike air气垫</p>
                        </div>
                        <div class="weui-cell__hd">
                            <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s12">
                        
                        <div class="weui-cell__bd">
                            <p class="sr_title">Nike板鞋</p>
                        </div>
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s13">
                    
                        <div class="weui-cell__bd">
                            <p class="sr_title">Nike篮球鞋Flight</p>
                        </div>
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s13">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s14">
                    
                        <div class="weui-cell__bd">
                            <p class="sr_title">Nike足球鞋</p>
                        </div>
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s14">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s15">
                    
                        <div class="weui-cell__bd">
                            <p class="sr_title">Nike高端定制</p>
                        </div>
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s15">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s16">
                    
                        <div class="weui-cell__bd">
                            <p class="sr_title">NIKE跑鞋</p>
                        </div>
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s16">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                </div>
            </div>
        </div>
        <div class="weui-flex screen_btn">
            <div class="weui-flex__reset screen_reset">重置筛选</div>
            <div class="weui-flex__item screen_ok">显示结果</div>
        </div>
    </div>
</div>

@@include('./include/footer.html')
<script src="../assets/js/Swiper-4.0.7/swiper.min.js"></script>

<script>
    $(function(){
        // var swiper = new Swiper('.swiper-container', {
        //     slidesPerView: 4,
        //     spaceBetween: 0,
        // });
        //切换
        // $(".weui-navbar").on("click", ".weui-navbar__item", function () {
        //     var _index = $(this).index();
        //     $(this).addClass("weui-bar__item--on").siblings().removeClass("weui-bar__item--on");
        //     $(".weui-tab__bd-item ").eq(_index).addClass("weui-tab__bd-item--active").siblings().removeClass("weui-tab__bd-item--active");
        // })

        // small_plus
        $(".small_plus").on('click',function(){
            var thas = '';
            thas = $(this);
            $("#popup_cat").popup();
            
            $('#js_check').on("click", function () {
                console.log(thas)
                $.closePopup(); //关闭弹出
                thas.hide().siblings().fadeIn(600); // 
            })
        })

        // 弹出
        $(".swiper_more").click(function () {
            $("#popup_screen").popup();
        })
        // screen-left
        $(".screen-left").on("click",".sl_title",function(){
            $(this).addClass("checked").siblings().removeClass('checked');
        })
        // screen_ok
        $(".screen_ok").on("click",function(){
            $.closePopup('#popup_screen')
            $(".rult_show").slideDown();
        })
        // screen_reset
        $(".screen_reset").on("click",function(){
            $(".sl_title").removeClass("checked");
            $("input[name=checkbox1]").prop("checked",false);
        })
        // del_btn
        $(".del_btn").on("click",function(){
            var _this = $(this);
            $.alert("自定义的消息内容", function () {
                //点击确认后的回调函数
                _this.parent(".rult_icon").slideUp();
            });
        })
        

    })
    
</script>
</body>
</html>